<figure class="image is-1by1">
    <a href="{% url 'baykeshop:product-retrieve' spu.id %}"><img src="{{ spu.pic.url }}" alt="{{ spu.title }}"></a>
</figure>
<div class="is-flex-grow-1 is-flex is-flex-direction-column is-justify-content-center">
    <p class="has-text-justified spu-title pl-3 pr-3">
        <a href="{% url 'baykeshop:product-retrieve' spu.id %}" class="has-text-black-ter">{{ spu.title|truncatechars:40 }}...</a>
    </p> 
</div>
<div class="pl-2 pr-2 pb-2">
    <div class="is-flex is-align-items-center is-justify-content-space-between">
        <span class="is-size-5 has-text-danger-dark">¥{{ spu.price }}</span>
        <span class="tag is-danger is-light is-size-7">券</span>
    </div>
    <div class="is-flex is-align-items-center is-justify-content-space-between">
        <span class="is-size-7 has-text-grey-light">{{ spu.sales }}人付款</span>
        <span class="is-size-7 has-text-grey-light">4.8分</span>
    </div>
</div>